1
00:00:00,330 --> 00:00:02,370
يا رفاق، إنها مضيفتكم، أنجيلا، هنا.

2
00:00:02,400 --> 00:00:07,110
مرحبًا بك في حلقة أخرى من برنامجك المفضل والتي من المفترض أن تكون متاحة بالفعل على Netflix.

3
00:00:07,530 --> 00:00:13,200
في هذه الحلقة، سنتعلم بالضبط كيف تعمل مواقع الويب فعليًا ونفهم دورها

4
00:00:13,200 --> 00:00:18,300
المتصفح والملفات المختلفة التي يستخدمها لعرض صفحات الويب المفضلة لديك.

5
00:00:18,780 --> 00:00:24,180
في السابق، في البرنامج التدريبي الكامل لتطوير الويب، تعلمت أن الإنترنت يتكون من سلك

6
00:00:24,180 --> 00:00:30,000
الذي يربط أجهزة الكمبيوتر العميلة بأجهزة كمبيوتر الخادم، وتعلم أن هناك أنواعًا خاصة من

7
00:00:30,000 --> 00:00:36,930
أجهزة كمبيوتر الخادم تسمى خوادم خدمة اسم المجال، والتي تعمل بمثابة دليل هاتف كبير قديم للصفحات الصفراء

8
00:00:36,930 --> 00:00:41,400
ويمكنه البحث عن عنوان IP لأي موقع ويب تريد الوصول إليه.

9
00:00:41,400 --> 00:00:47,430
وعندما تكتشف عنوان IP هذا، يمكنك الاتصال مباشرة بالكمبيوتر الخادم لموقع الويب

10
00:00:47,430 --> 00:00:53,790
الذي تريد عرضه وسيرسلون لك جميع الملفات والبيانات ليتمكن متصفحك من عرضها

11
00:00:53,790 --> 00:00:55,020
على الشاشة.

12
00:00:55,080 --> 00:01:02,460
الآن، تتكون البيانات التي تتلقاها من ذلك الخادم عادةً من ثلاثة أنواع من الملفات HTML وCSS و

13
00:01:02,460 --> 00:01:03,600
وجافا سكريبت.

14
00:01:03,720 --> 00:01:08,820
ومن المحتمل جدًا أنك صادفت هذه الأنواع من الملفات أو هذه الكلمات من قبل

15
00:01:08,820 --> 00:01:12,860
إنها شائعة جدًا وهي جزء لا يتجزأ من كيفية عمل مواقع الويب.

16
00:01:12,870 --> 00:01:18,570
ولكن ما الذي يفعلونه بالضبط ولماذا يوجد العديد من أنواع الملفات المختلفة؟

17
00:01:18,570 --> 00:01:22,740
لماذا لا يكون لدينا ملف واحد فقط، وهو موقع على شبكة الإنترنت؟

18
00:01:23,930 --> 00:01:26,690
حسنًا، لديهم في الواقع وظائف مختلفة جدًا.

19
00:01:26,700 --> 00:01:32,510
لذلك، على سبيل المثال، يكون ملف تعليمات HTML البرمجية مسؤولاً عن المحتوى الموجود في موقع الويب الخاص بك.

20
00:01:32,510 --> 00:01:37,670
لذا، إذا كان موقع الويب عبارة عن منزل، فإن HTML سيكون بمثابة الطوب الفعلي للمنزل.

21
00:01:37,670 --> 00:01:40,610
إنها المواد الخام التي يتكون منها منزلك.

22
00:01:40,640 --> 00:01:46,850
وبالمثل، يحتوي ملف HTML على محتوى موقع الويب الخاص بك، مثل محتوى النص أو الصور

23
00:01:46,850 --> 00:01:48,500
أو الأزرار أو الروابط.

24
00:01:48,530 --> 00:01:55,070
النوع الثاني من الملفات هو ملفات CSS، وهي المسؤولة عن تصميم موقع الويب الخاص بك

25
00:01:55,070 --> 00:01:58,250
لون الجدران أو شكل بابك.

26
00:01:58,280 --> 00:02:01,480
يحدد ملف CSS الشكل الذي سيبدو عليه موقع الويب الخاص بك.

27
00:02:01,490 --> 00:02:07,340
إذن، ما هو لون خلفية الصفحة، أم أن الأزرار سيكون لها زوايا مستديرة؟

28
00:02:07,430 --> 00:02:14,060
فهو يستهدف كل المحتوى الموجود في موقع الويب الخاص بك والذي قمت بإنشائه باستخدام HTML، على سبيل المثال، النص أو ملف

29
00:02:14,060 --> 00:02:17,900
الأزرار ويطبق التصميم على تلك العناصر.

30
00:02:17,900 --> 00:02:24,380
لذلك يمكنك استخدام CSS لجعل الزر أحمر اللون وله زوايا مستديرة ونص الزر له خاصيته

31
00:02:24,380 --> 00:02:25,030
الخط.

32
00:02:25,040 --> 00:02:27,170
هذا هو الغرض من CSS.

33
00:02:27,830 --> 00:02:33,710
الآن المكون الأخير هو كود JavaScript، وهذا هو الكود الذي يسمح لموقع الويب الخاص بك فعليًا

34
00:02:33,710 --> 00:02:36,260
القيام بالأشياء، أو الحصول على وظيفة.

35
00:02:36,350 --> 00:02:42,350
لذا، إذا كنت تقوم ببناء منزل، فسيكون ذلك بمثابة إضافة مصابيح كهربائية يمكن تشغيلها وإطفاؤها أو وضعها

36
00:02:42,350 --> 00:02:45,950
في طباخ يمكنه بالفعل إشعال النار لتسخين طعامك.

37
00:02:45,980 --> 00:02:51,920
إنه يحول منزلك إلى منزل، ويقوم كود JavaScript بذلك بالضبط بالنسبة لموقع الويب.

38
00:02:51,920 --> 00:02:58,310
إنه يحول موقع الويب الثابت الذي يحتوي فقط على صور أو نصوص جميلة إلى شيء يمكن للمستخدم فعله بالفعل

39
00:02:58,310 --> 00:02:59,240
تتفاعل مع.

40
00:02:59,270 --> 00:03:03,950
على سبيل المثال، أرسل بريدًا إلكترونيًا على Gmail أو انشر وجبة الإفطار على Instagram.

41
00:03:04,310 --> 00:03:09,920
فهو يتيح لموقع الويب الخاص بك القيام بالأشياء فعليًا ويصبح عمليًا، وليس مجرد شيء جميل المظهر

42
00:03:09,920 --> 00:03:10,130
في.

43
00:03:10,160 --> 00:03:16,040
لذا، إذا أخذنا صفحة Google الرئيسية كمثال، فمرة أخرى، بمجرد استلامنا لهذه الأنواع الثلاثة من الملفات

44
00:03:16,040 --> 00:03:23,180
ومن خادم جوجل يمكننا استخدام متصفحنا وهو عبارة عن برنامج متخصص في التعامل

45
00:03:23,180 --> 00:03:24,260
مع هذه الملفات.

46
00:03:24,440 --> 00:03:29,830
لذا، عندما يقوم المتصفح بتحميل ملف HTML، سيتمكن من رؤية محتوى موقع الويب.

47
00:03:29,840 --> 00:03:33,860
لذا، في هذه الحالة، هناك صورة واحدة تحمل شعار Google.

48
00:03:33,890 --> 00:03:38,360
يوجد زران ويوجد مربع نص يمكننا من خلاله إدخال مصطلح البحث الخاص بنا.

49
00:03:38,690 --> 00:03:45,950
الآن عندما يقوم المتصفح بتحميل ملفات CSS، فإنه سيقوم بتعديل مظهر تلك المكونات

50
00:03:46,040 --> 00:03:52,700
لذلك لن نحصل على أي أزرار أو صور إضافية أو أي شيء باستخدام CSS، لكنه سيبدو الآن تمامًا

51
00:03:52,700 --> 00:03:54,770
بالطريقة التي أرادتها جوجل.

52
00:03:54,830 --> 00:03:58,460
شكل مربع النص هذا أو لون الأزرار.

53
00:03:58,460 --> 00:04:05,280
وأخيرًا، باستخدام ملف JavaScript، يمنحنا المتصفح وظائف هذا الموقع.

54
00:04:05,300 --> 00:04:09,800
لذا يمكننا كتابة مصطلح بحث مثل Google في عام 1998.

55
00:04:09,800 --> 00:04:14,600
وبالمناسبة، يجب عليك تجربة ذلك في Google لأنه عندما تضغط على "بحث"، سيتحول إلى Google

56
00:04:14,600 --> 00:04:17,220
إلى ما بدا عليه في عام 1998.

57
00:04:17,240 --> 00:04:23,720
لذا، باستخدام هذه الملفات الثلاثة المختلفة، نحصل على المحتوى، ونحصل على التصميم، وفي النهاية نحصل عليه

58
00:04:23,720 --> 00:04:25,790
وظيفة الموقع.

59
00:04:25,790 --> 00:04:29,690
ودمجنا معًا هو كيفية إنشاء مواقع الويب الحديثة.

60
00:04:29,720 --> 00:04:34,640
الآن، مع كل هذه المعرفة التي اكتسبناها بالفعل، يمكننا بالفعل البدء في العبث بها

61
00:04:34,640 --> 00:04:36,500
مواقع حقيقية على شبكة الإنترنت.

62
00:04:36,500 --> 00:04:44,090
لذا، إذا قمت بفتح متصفحك وتوجهت إلى Google.com، فيمكنك النقر بزر الماوس الأيمن على الزر، والذي

63
00:04:44,090 --> 00:04:47,750
هو بحث Google وانقر على فحص.

64
00:04:48,720 --> 00:04:52,770
الآن، ما يفعله هذا هو أنه يعرض أدوات مطور Chrome.

65
00:04:52,860 --> 00:04:57,300
والآن، أصبح لدى Chrome واحدة من أفضل مجموعات الأدوات لمطوري الويب مثلنا.

66
00:04:57,330 --> 00:05:02,460
ولهذا طلبت منك في بداية الدورة تنزيل متصفح كروم حتى لو كنت

67
00:05:02,460 --> 00:05:04,230
عادةً ما تستخدم متصفحًا مختلفًا.

68
00:05:04,320 --> 00:05:08,760
لذا، إذا لم تكن قد قمت بتنزيل Chrome بعد، فتأكد من القيام بذلك الآن قبل المتابعة.

69
00:05:08,790 --> 00:05:12,750
وإلا فإن بعض الأشياء التي أقولها قد لا تعمل. وفي الدروس القادمة

70
00:05:12,750 --> 00:05:18,030
سنقوم باستكشاف أدوات مطوري Chrome بمزيد من التفاصيل، ولكن في الوقت الحالي نحن فقط

71
00:05:18,030 --> 00:05:20,450
سأستخدمه لفعل شيء بسيط حقًا.

72
00:05:20,460 --> 00:05:25,980
لذا يمكنك أن ترى أن أدوات مطوري Chrome قامت تلقائيًا بتمييز الجزء الموجود في الكود

73
00:05:25,980 --> 00:05:31,170
المسؤول عن هذا الزر الذي نقرت عليه بزر الماوس الأيمن وأردت فحصه.

74
00:05:31,380 --> 00:05:37,920
وإذا نظرنا بعناية، يمكنك أن ترى أن عنوان الزر الذي يشير إلى بحث Google هو في الواقع

75
00:05:37,920 --> 00:05:41,760
هنا ويمكننا العثور عليه هنا.

76
00:05:42,800 --> 00:05:44,980
فقط بعد قيمة الكلمة.

77
00:05:44,990 --> 00:05:50,000
وإذا نقرنا عليه نقرًا مزدوجًا، فيمكننا في الواقع تعديل هذا العنوان ليقول شيئًا كاملاً

78
00:05:50,000 --> 00:05:50,700
مختلفة.

79
00:05:50,720 --> 00:05:54,320
لذا بدلًا من بحث Google، دعنا نسميه بحث Angela.

80
00:05:54,800 --> 00:05:58,820
وبعد ذلك بمجرد الضغط على زر الإدخال، سترى هذا التحديث هنا.

81
00:06:00,000 --> 00:06:04,020
الآن، ستلاحظ أيضًا وجود بحث يسمى aria-label Google Search.

82
00:06:04,020 --> 00:06:08,100
وهذا في الواقع مخصص لقراء النصوص فقط وليس لمتصفحنا.

83
00:06:08,130 --> 00:06:12,750
يمكنك تغيير ذلك أيضًا، ولكن هذا يعني أنك لن تراه حقًا على الشاشة.

84
00:06:13,050 --> 00:06:16,500
إنه تحديث شيء يتم استخدامه خلف الكواليس.

85
00:06:16,950 --> 00:06:19,740
لذا تأكد من النقر مرتين على الشيء الصحيح.

86
00:06:20,100 --> 00:06:27,900
الآن، اعتمادًا على محتوى HTML الذي نفحصه، قد يكون الجزء الذي يتعين علينا تغييره مختلفًا.

87
00:06:28,200 --> 00:06:34,260
لذلك، على سبيل المثال، إذا أردت تغيير العناوين الرئيسية على موقع techcrunch.com، فيمكنك ببساطة القيام بذلك

88
00:06:34,260 --> 00:06:40,470
انقر على أحد هذه العناوين، وانقر على الجزء الذي يتوافق مع هذا العنوان، وافحصه وابحث عنه،

89
00:06:40,470 --> 00:06:45,870
والذي هو هنا باللون الأسود، ويمكننا النقر عليه نقرًا مزدوجًا ليقول شيئًا مختلفًا تمامًا.

90
00:06:49,620 --> 00:06:57,010
ويمكنك بالفعل تغيير الصفحة الأولى لموقع TechCrunch أو BBC News أو أي موقع ويب تريده.

91
00:06:57,030 --> 00:07:02,430
لذا فهذه طريقة رائعة لمزاح أصدقائك، خاصة عندما يرون أنك على موقع techcrunch.com

92
00:07:02,430 --> 00:07:08,570
ويمكن للعنوان أو أي جزء آخر من النص أن يقول ما تريد.

93
00:07:08,670 --> 00:07:14,490
وهذه نكتة رائعة يمكن لعبها مع الأصدقاء الذين ربما ليسوا متقدمين تقنيًا مثلك تمامًا،

94
00:07:14,490 --> 00:07:17,400
لأنهم لم يأخذوا الدورة التي لديك.

95
00:07:17,670 --> 00:07:22,830
الآن، لسوء الحظ، عندما أضغط على التحديث على هذا الموقع، سترى أنه تمت استعادة كل شيء

96
00:07:22,830 --> 00:07:25,830
إلى النسخة الأصلية للموقع.

97
00:07:25,920 --> 00:07:32,610
والسبب في ذلك هو أنه عندما نضغط على التحديث، فإننا نطلب من خوادم TechCrunch التسليم

98
00:07:32,610 --> 00:07:41,100
نستخدم ملفات HTML وCSS وJavaScript مرة أخرى حتى نتمكن من عرض موقع الويب على متصفحنا.

99
00:07:41,250 --> 00:07:47,070
ولكن عندما نقوم بتحرير موقعنا على الويب في أدوات مطوري Chrome، فإن ما نقوم بتغييره هو ما نقوم بتغييره فعليًا

100
00:07:47,070 --> 00:07:48,480
النسخة المحلية,

101
00:07:48,480 --> 00:07:51,190
ولا يتم حفظ هذا عندما تضغط على التحديث.

102
00:07:51,210 --> 00:07:55,020
وبالطبع سيتم تحديث الموقع إلى المحتوى الأصلي.

103
00:07:55,020 --> 00:08:01,650
ولكن في الدروس القادمة سنعمل مع HTML وCSS وJavaScript حتى تتمكن من الإنشاء

104
00:08:01,650 --> 00:08:08,520
واستضافة مواقع الويب الخاصة بك، مباشرة على الإنترنت ومن خلال تعلم كيفية البرمجة وكيفية البناء

105
00:08:08,520 --> 00:08:09,160
مواقع الويب.

106
00:08:09,180 --> 00:08:14,610
ستكون قادرًا على إنشاء مواقع الويب التي تقول أي شيء تريده، وستظهر بالطريقة التي تريدها

107
00:08:14,610 --> 00:08:17,730
عليه والحصول على الوظائف التي تحتاجها.

108
00:08:17,760 --> 00:08:21,480
لذلك، لكل ذلك وأكثر، أراكم في الدرس التالي.